import React, { Component } from "react";
import styles from "./index.less";
import { Button } from "antd";

class Modal extends Component {
  constructor(props) {
    super(props);
    this.state = {
      title: props.title || "标题",
      okText: props.okText || "confirm",
      cancelText: props.cancelText || "cancel",
      style: props.style
    };
  }

  onClose = e => {
    if (e.target.dataset.type === "mask") {
      // 表示点击的是mask
      this.props.onCancel();
    }
  };

  render() {
    const { style, title, okText, cancelText } = this.state;
    const { visible, onCancel, onOk } = this.props;

    if (!visible) return false;
    return (
      <div className={styles.mask} data-type="mask" onClick={this.onClose}>
        <div className={styles.content} style={style}>
          <h3>{title}</h3>
          <hr />
          <div className={styles.wrapper}>
            {this.props.children || "内容..."}
          </div>

          <div className={styles.btns_box}>
            <Button type="primary" danger onClick={onCancel}>
              {cancelText}
            </Button>
            <Button type="primary" onClick={onOk}>
              {okText}
            </Button>
          </div>
        </div>
      </div>
    );
  }
}

export default Modal;
